<template>
  <am-modal :is-show.sync="v_modalVisible" :width="width" :close-via-dimmer="false">
    <am-modal-header :closeable="true">
      <slot name="header"></slot>
    </am-modal-header>
    <am-modal-body>
      <slot name="body"></slot>
      <slot></slot>
    </am-modal-body>
    <am-modal-footer>
      <slot name="footer"></slot>
    </am-modal-footer>
  </am-modal>

</template>

<script>
export default {
  name: 'modal',
  data() {
    return {
      title: '',
      v_modalVisible: false,
    }
  },
  props: {
    width: {
      type: Number,
      default: 400
    },
    modalVisible: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    modalVisible(val) {
      this.v_modalVisible = val;
    },
    v_modalVisible(val) {
      this.$emit('update:modalVisible', val)
    }
  }
}
</script>